<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- <link rel="stylesheet" type="text/css" href=""/> -->
    <title> 组件的声明周期 </title>
</head>
<body>
	<div id="app">
		<div>
			<h1>不想学习</h1>
			<button  >按住我解决一切烦恼</button>
		</div>
	</div>
    
    <script type="text/javascript" src="../js/react.development.js">    </script>	
	<script type="text/javascript" src="../js/react-dom.development.js">    </script>	
	<script type="text/javascript" src="../js/prop-types.js">    </script>
	<script type="text/javascript" src="../js/babel.min.js">    </script>	
	<script type="text/babel" >
	
	
	class Life extends React.Component {
		constructor(props) {
			super(props)
			this.state={
				opacity:'1'
			}
			this.myclick=this.myclick.bind(this);
		}
		// 挂在数据之后
		componentDidMount(){			
			this.inter_id =  setInterval(function (){
				let opacity =  this.state.opacity;
				opacity -=0.2
				if(opacity<=0){
					opacity =1;
				}
				// 修改状态
				this.setState({opacity})
			}.bind(this),1000)
		}
		// 销毁组件之前
		componentWillUnmount(){
			clearInterval(this.inter_id)
		}
		myclick=function(){
			ReactDOM.unmountComponentAtNode(document.getElementById("app"))
		}
		render(){
			return(
				<div style={{opacity:this.state.opacity}}>
					<h1>{this.props.mgs}</h1>
					<button onClick={this.myclick}>按住我解决一切烦恼</button>
				</div>
			)
		}
	}
	ReactDOM.render(<Life mgs={'太难了'} />,document.getElementById("app"))
	</script>
</body>
</html>
